{% extends 'my/my-teaching.html.twig' %}

{% block title %}{{ 'my.teaching.classroom'|trans({'%classroom%':setting('classroom.name')|default('site.default.classroom'|trans)}) }} - {{ parent() }}{% endblock %}

{% set side_nav = 'my-teaching-classroom' %}

{% block main %}
  <div class="my-teaching-status">
    <ul>
      <li {% if tab == 'publish' %}class="active" {% endif %}><a href="{{path('my_teaching_classrooms',{'tab': 'publish'})}}">{{'course.status.published'|trans}}</a></li>
      <li {% if tab == 'unPublish' %}class="active" {% endif %}><a href="{{path('my_teaching_classrooms',{'tab': 'unPublish'})}}">{{'course.status.unpublished'|trans}}</a></li>
      <li {% if tab == 'closed' %}class="active" {% endif %}><a href="{{path('my_teaching_classrooms',{'tab': 'closed'})}}">{{'course.status.closed'|trans}}</a></li>
    </ul>
  </div>
    {% for classroom in classrooms %}
      <div class="cd-mb32">
        <div class="courseset-manage-header clearfix">
          <div class="clearfix">
            <img class="courseset-manage-header__img" src="{{ filepath(classroom.middlePicture, 'classroom.png') }}"/>

            {% if classroom.status=='closed' %}
              <span
                class="course-publish-status course-publish-status--closed">{{ 'classroom.status.closed'|trans }}</span>
            {% elseif classroom.status=='draft' %}
              <span
                class="course-publish-status course-publish-status--unpublished">{{ 'classroom.status.unpublish'|trans }}</span>
            {% elseif classroom.status=='published' %}
              <span
                class="course-publish-status course-publish-status--published">{{ 'classroom.status.published'|trans }}</span>
            {% endif %}

            <div class="courseset-manage-header-info">
              <div class="courseset-manage-header-info__title text-overflow"
                   {% if classroom.title|length > 21 %}data-toggle="tooltip" title="{{ classroom.title }}"
                   data-container="body" {% endif %}>
                <span class="cd-dark-major">{{ classroom.title|raw }}</span>
              </div>

              <div class="courseset-manage-header-info__price color-danger">
                {% include 'common/price.html.twig' with {'productPrice': classroom.price} %}
              </div>
            </div>

            <div class="courseset-manage-header-btn">
              {% if classroom.canManageClassroom %}}
                <a class="cd-btn cd-btn-primary" target="_blank"
                   href="{{ path('classroom_manage',{id:classroom.id}) }}">{{ 'my.teaching.classroom.manage_btn'|trans({'%classroom%':setting('classroom.name')|default('site.default.classroom'|trans)}) }}</a>
              {% else %}
                <a class="cd-btn" href="javascript:;">&#12288&#12288&#12288&#12288</a>
              {% endif %}

              <a class="cd-btn cd-btn-default cd-ml16"
                 href="{{ path('classroom_courses',{classroomId:classroom.id,previewAs:'guest'}) }}"
                 target="_blank">{{ 'my.teaching.classroom.preview'|trans }}</a>
            </div>

            <div class="courseset-manage-header-data hidden-xs">
              <span class="cd-text-medium">{{ 'my.teaching.classroom.studen_count'|trans }}</span>
              <div class="cd-mt16 cd-dark-major">
                <span class="courseset-manage-header-data__num">{{ classroom.studentNum + classroom.auditorNum }}</span>
              </div>
            </div>

            <div class="courseset-manage-header-data hidden-xs">
              <span class="cd-text-medium">{{ 'my.teaching.classroom.course_count'|trans }}</span>
              <div class="cd-mt16 cd-dark-major">
                <span class="courseset-manage-header-data__num">{{ classroom.coursesCount|default(0) }}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    {% else %}
      <div class="empty">
        {{ 'site.datagrid.empty'|trans }}
      </div>
    {% endfor %}
  </div>

  <nav class="text-center">
    {{ web_macro.paginator(paginator) }}
  </nav>
  </div>
{% endblock %}